<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>委案批次名称格式化测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        h1 {
            color: #1890ff;
            text-align: center;
            margin-bottom: 30px;
        }
        .test-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #e8e8e8;
            border-radius: 6px;
            background-color: #fafafa;
        }
        .test-case {
            margin-bottom: 15px;
            padding: 10px;
            background: white;
            border-radius: 4px;
            border-left: 4px solid #1890ff;
        }
        .input {
            color: #666;
            font-weight: bold;
        }
        .output {
            color: #52c41a;
            font-weight: bold;
        }
        .arrow {
            color: #1890ff;
            font-size: 18px;
            margin: 0 10px;
        }
        .description {
            color: #666;
            font-size: 14px;
            margin-top: 10px;
        }
        .success {
            color: #52c41a;
            font-weight: bold;
        }
        .error {
            color: #ff4d4f;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>委案批次名称格式化测试</h1>
        
        <div class="test-section">
            <h2>测试说明</h2>
            <p>此测试验证委案弹框中批次名称的格式化功能，将格式从 "兴业银行-臻隆-良庆-臻隆-20250929_35-1" 转换为 "兴业银行-臻隆-良庆-臻隆-20250929-1"</p>
        </div>

        <div class="test-section">
            <h2>测试用例</h2>
            <div id="test-results"></div>
        </div>

        <div class="test-section">
            <h2>测试结果</h2>
            <div id="summary"></div>
        </div>
    </div>

    <script>
        /**
         * 格式化批次名称
         * 将格式从 "兴业银行-臻隆-良庆-臻隆-20250929_35-1" 转换为 "兴业银行-臻隆-良庆-臻隆-20250929-1"
         * 移除日期后面的 "_数字" 部分
         * @param {string} batchName 原始批次名称
         * @returns {string} 格式化后的批次名称
         */
        function formatBatchName(batchName) {
            if (!batchName) return '';

            try {
                // 使用正则表达式匹配日期格式 YYYYMMDD_数字 并移除 _数字 部分
                // 匹配模式：8位数字_数字 或 8位数字_数字-数字
                const formattedName = batchName.replace(/(\d{8})_\d+(-?\d*)/g, '$1$2');
                return formattedName;
            } catch (error) {
                console.error('格式化批次名称失败:', error);
                // 如果格式化失败，返回原始名称
                return batchName;
            }
        }

        // 测试用例
        const testCases = [
            {
                input: "兴业银行-臻隆-良庆-臻隆-20250929_35-1",
                expected: "兴业银行-臻隆-良庆-臻隆-20250929-1",
                description: "标准格式：移除日期后的_35"
            },
            {
                input: "农信社-好瑞迪-良庆-好瑞迪-20250924_55-3",
                expected: "农信社-好瑞迪-良庆-好瑞迪-20250924-3",
                description: "另一个标准格式：移除日期后的_55"
            },
            {
                input: "建设银行-测试-区域-测试-20250101_10-5",
                expected: "建设银行-测试-区域-测试-20250101-5",
                description: "不同银行：移除日期后的_10"
            },
            {
                input: "工商银行-项目-地区-项目-20251231_99",
                expected: "工商银行-项目-地区-项目-20251231",
                description: "无后续数字：移除日期后的_99"
            },
            {
                input: "招商银行-测试-区域-测试-20250315_1-10",
                expected: "招商银行-测试-区域-测试-20250315-10",
                description: "复杂格式：移除日期后的_1"
            },
            {
                input: "中国银行-项目-地区-项目-20250601",
                expected: "中国银行-项目-地区-项目-20250601",
                description: "无下划线：保持原样"
            },
            {
                input: "交通银行-测试-区域-测试-20250701_abc-5",
                expected: "交通银行-测试-区域-测试-20250701_abc-5",
                description: "非数字下划线：保持原样"
            },
            {
                input: "",
                expected: "",
                description: "空字符串：返回空字符串"
            },
            {
                input: "简单批次名称",
                expected: "简单批次名称",
                description: "简单名称：保持原样"
            }
        ];

        // 运行测试
        function runTests() {
            const testResults = document.getElementById('test-results');
            const summary = document.getElementById('summary');
            let passedTests = 0;
            let totalTests = testCases.length;

            testResults.innerHTML = '';

            testCases.forEach((testCase, index) => {
                const result = formatBatchName(testCase.input);
                const passed = result === testCase.expected;
                
                if (passed) {
                    passedTests++;
                }

                const testDiv = document.createElement('div');
                testDiv.className = 'test-case';
                testDiv.innerHTML = `
                    <div>
                        <span class="input">输入: "${testCase.input}"</span>
                        <span class="arrow">→</span>
                        <span class="output">输出: "${result}"</span>
                        <span class="${passed ? 'success' : 'error'}">${passed ? '✓ 通过' : '✗ 失败'}</span>
                    </div>
                    <div class="description">${testCase.description}</div>
                    ${!passed ? `<div class="error">期望: "${testCase.expected}"</div>` : ''}
                `;
                testResults.appendChild(testDiv);
            });

            // 显示测试总结
            const passRate = ((passedTests / totalTests) * 100).toFixed(1);
            summary.innerHTML = `
                <div class="test-case">
                    <h3>测试总结</h3>
                    <p>总测试数: ${totalTests}</p>
                    <p>通过数: <span class="success">${passedTests}</span></p>
                    <p>失败数: <span class="error">${totalTests - passedTests}</span></p>
                    <p>通过率: <span class="${passedTests === totalTests ? 'success' : 'error'}">${passRate}%</span></p>
                </div>
            `;

            if (passedTests === totalTests) {
                summary.innerHTML += '<div class="test-case"><p class="success">🎉 所有测试通过！委案批次名称格式化功能正常工作。</p></div>';
            } else {
                summary.innerHTML += '<div class="test-case"><p class="error">❌ 部分测试失败，请检查实现。</p></div>';
            }
        }

        // 页面加载完成后运行测试
        document.addEventListener('DOMContentLoaded', runTests);
    </script>
</body>
</html>
